<template>
  <div class="login">
    <topback></topback>
    <header class="login-header">
      <img src="../../assets/MBE.png" alt="" />
    </header>
    <section>
      <h3>登录</h3>
      <p>输入您的手机号码或邮箱和密码</p>
      <p>登录您的账号</p>
    </section>
    <section>
      <!-- vant组件 -->
      <van-form @submit="onSubmit">
        <van-field
          v-model="user"
          name="user"
          label=""
          placeholder="手机号码或邮箱"
          :rules="[{ required: true, message: '' }]"
        />
        <van-field
          v-model="passWord"
          type="password"
          name="passWord"
          label=""
          placeholder="密码"
          :rules="[{ required: true, message: '' }]"
        />

        <div class="my-from-item">
          <div class="left">
            <van-field name="checkbox" label="">
              <template #input>
                <van-checkbox v-model="checkbox" shape="square" />
                <span class="txt">记住我</span>
              </template>
            </van-field>
          </div>

          <div class="right">
            <a href="#">忘记密码?</a>
          </div>
        </div>

        <div style="margin: 16px; text-align: center">
          <van-button block type="primary" native-type="submit"
            >登陆</van-button
          >
        </div>
      </van-form>
    </section>

    <footer class="login-footer">
      <p>
        还没有账号吗?
        <router-link to="/enroll">马上注册</router-link>
      </p>
    </footer>
  </div>
</template>
  
  <script>
let rep_phone = /^1[3-9]\d{9}$/;
let rep_email =
  /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
// 局部
import { loginFunc } from "../../http/api";
import Vue from "vue";
import { Dialog } from "vant";
import topback from "@/components/topback.vue";
import store from "@/store";
// 全局注册
Vue.use(Dialog);
export default {
  components: {
    [Dialog.Component.name]: Dialog.Component,
    topback,
  },
  data() {
    return {
      user: "",
      passWord: "",
      checkbox: false,
    };
  },
  methods: {
    // 请求服务器处理登录
    onSubmit(values) {
      //console.log("submit", values);
      //242234234@qq.com
      //11111
      let that = this;
      let user = values.user;
      let passWord = values.passWord;
      if (rep_email.test(user)) {
        var email = user;
        loginFunc("/user/login", { email, passWord }).then((data) => {
          if (data.code == 200) {
            // 解构赋值
            let { token, email, phone, userName, avatar,shop_cart,userAddress,allorder } = data;
            // 把用户的临时身份储存在本地(可以把token进行切片之后储存起来,需要使用再进行拼接)
            localStorage.setItem("token", token);
            if(shop_cart==null){
              localStorage.setItem("shop", shop_cart);
            }else{
              localStorage.setItem("shop", shop_cart.replace(/'/g, '"'));
            }
            if(userAddress==null){
              localStorage.setItem("address", userAddress);
            }else{
              localStorage.setItem("address", userAddress.replace(/'/g, '"'));
            }
            if(allorder==null){
              localStorage.setItem("allorder", allorder);
            }else{
              localStorage.setItem("allorder", allorder.replace(/'/g, '"'));
            }
            // 把数据储存在vuex
            // console.log(this.$store);
            this.$store.dispatch("user/setEmailAsync", email);
            this.$store.dispatch("user/setPhoneAsync", phone);
            this.$store.dispatch("user/setUserNameAsync", userName);
            this.$store.dispatch("user/setAvatarAsync", avatar);
            Dialog.alert({
              title: "是否跳转个人中心页面?",
              message: data.msg,
            }).then(() => {
              console.log("test");
              console.log(this.$router);
              // 页面跳转(传递参数)
              this.$router.push({ path: "/my" });
            });
          } else {
            Dialog.alert({
              message: data.msg,
            });
          }
        });
      } else if (rep_phone.test(user)) {
        var phone = user;
        loginFunc("/user/login", { phone, passWord }).then((data) => {
          if (data.code == 200) {
             // 解构赋值
             let { token, email, phone, userName, avatar,shop_cart,userAddress,allorder } = data;
            // 把用户的临时身份储存在本地(可以把token进行切片之后储存起来,需要使用再进行拼接)
            
            localStorage.setItem("token", token);
            if(shop_cart==null){
              localStorage.setItem("shop", shop_cart);
            }else{
              localStorage.setItem("shop", shop_cart.replace(/'/g, '"'));
            }
            if(userAddress==null){
              localStorage.setItem("address", userAddress);
            }else{
              localStorage.setItem("address", userAddress.replace(/'/g, '"'));
            }
            if(allorder==null){
              localStorage.setItem("allorder", allorder);
            }else{
              localStorage.setItem("allorder", allorder.replace(/'/g, '"'));
            }
            
            // console.log(data);
            // 把数据储存在vuex
            // console.log(store, "1");
            store.dispatch("user/setEmailAsync", email);
            store.dispatch("user/setPhoneAsync", phone);
            store.dispatch("user/setUserNameAsync", userName);
            store.dispatch("user/setAvatarAsync", avatar);
            Dialog.alert({
              title: "是否跳转个人中心页面?",
              message: data.msg,
            }).then(() => {
              console.log("test");
              console.log(this.$router);
              // 页面跳转(传递参数)
              this.$router.push({ path: "/my" });
            });
          } else {
            Dialog.alert({
              message: data.msg,
            });
          }
        });
      }
    },
  },
};
</script>
  
  <style lang="scss" scoped>
// @import "../../static/css/base.scss";
@import "../../static/css/common.scss";

.login {
  width: 100%;
  
  font-size: 16px;
  background-color: #fff;
  .van-button--block {
    background-color: #0bb783;
    border: 0;
  }
  .login-header {
    text-align: center;
    height: 160px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 112px;
    }
  }
  section {
    padding: 0 15px;
    h3,
    p {
      text-align: center;
      height: 28px;
      font-size: 12px;
    }
    p {
      color: #999;
    }
  }
  .login-footer {
    color: #333;
    p {
      text-align: center;
      a {
        color: #999;
      }
    }
  }
}
.my-from-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    .van-field__label {
      width: auto;
      margin-right: 0.25rem;
    }
    span.txt {
      color: #999;
      margin-left: 0.5rem;
    }
  }
  .right {
    a {
      color: #999;
      font-size: 12px;
    }
  }
}
</style>